/**
 * Created by MorenYang on 2017/12/8.
 */
import React from 'react';
import {login} from '../../../store/actions/auth'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {Row, Col, Card, Form, Icon, Input, Button, Radio} from 'antd'

class LoginView extends React.Component {
  state = {
    user: {
      username: '',
      password: '',
      isCustomer: true
    }
  };

  handleInputChange = (e) => {
    const {user} = this.state;
    user[e.target.name] = e.target.value;
    this.setState(user);
  };

  render() {
    return (
      <div>
        <Row type={'flex'} align={'middle'} justify={'center'} style={{minHeight: `100vh`}}>
          <Col span={6} style={{marginBottom: 80}}>
            <Card hoverable={true} bodyStyle={{padding: 16}}>
              <Form>
                <div style={{marginBottom: 16}}>
                  <Input prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>} placeholder="Username"
                         name={'username'} onChange={this.handleInputChange} value={this.state.user.username}/>
                </div>
                <div style={{marginBottom: 16}}>
                  <Input prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password"
                         placeholder="Password" name={'password'} onChange={this.handleInputChange}
                         value={this.state.user.password}/>
                </div>
                <div style={{marginBottom: 16}}>
                  <Radio.Group name={'isCustomer'} value={this.state.user.isCustomer} onChange={this.handleInputChange}>
                    <Radio value={true}>业主</Radio>
                    <Radio value={false}>维修师傅</Radio>
                  </Radio.Group>
                </div>
                <Button type="primary" className="login-form-button" style={{width: `100%`}}>
                  登录
                </Button>
              </Form>
            </Card>
          </Col>
        </Row>
      </div>
    )
  }
}


const mapStateToProps = ({auth}) => ({auth});
const mapDispatchToProps = (dispatchEvent) => (
  bindActionCreators({login}, dispatchEvent)
);

export default connect(mapStateToProps, mapDispatchToProps)(LoginView)
